<template>
   
  <div>
        <my-header></my-header>    
    <el-card style="margin-top: 10px">
           
      <div id="main" ref="main" style="max-width: 800px; height: 400px"></div>
         
    </el-card>
     
  </div>
</template>

<script>
import * as echarts from "echarts";
import { getTu } from "../../api/api";
import myHeader from "../../components/myHeader.vue";

export default {
  components: { myHeader },
  name: "reports",
  data() {
    return {
      options: {},
    };
  },
  methods: {
    async getInof() {
      try {
        let res = await getTu();
        console.log(res.data, "数据");
        this.options = res.data;
        const echart = echarts.init(this.$refs.main);
        console.log(echart, "11111");
        echart.setOption(this.options);
      } catch (error) {
        console.log(error);
      }
        var myChart = echarts.init(document.getElementById('main'));
      window.onresize = function () {
        myChart.resize();
      };
    },
  },
  created() {
    this.getInof();
  },
};
</script>

<style lang="scss" scoped>
</style>